<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购买手机</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: auto;
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        .attribute {
            margin: 10px 0;
        }
    </style>
</head>
<body>
<h1 id="product-name"></h1>
<img id="main-image" src="" alt="主图" />
<p>价格: <span id="product-price"></span> 元</p>
<p>库存: <span id="product-stock"></span> 件</p>

<div id="attributes-container"></div>

<button id="purchase-button">购买</button>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    const productId = 1; // 替换为实际的产品ID
    const selectedAttributes = {};
    let product = {};
    let selectedVariant = {};

    async function fetchProduct() {
        try {
            const response = await axios.get(`/api/products/${productId}`);
            product = response.data;
            displayProduct();
            updateSelectedVariant();
        } catch (error) {
            console.error('获取商品信息失败:', error);
        }
    }

    function displayProduct() {
        document.getElementById('product-name').innerText = product.name;
        document.getElementById('main-image').src = product.variants[0].mainImage; // 默认显示第一个变体的主图
        document.getElementById('product-price').innerText = product.variants[0].price;
        document.getElementById('product-stock').innerText = product.variants[0].stock;

        const attributesContainer = document.getElementById('attributes-container');
        product.attributes.forEach(attribute => {
            const attributeDiv = document.createElement('div');
            attributeDiv.className = 'attribute';
            const attributeLabel = document.createElement('h3');
            attributeLabel.innerText = attribute.name;
            attributeDiv.appendChild(attributeLabel);

            attribute.values.forEach(value => {
                const radio = document.createElement('input');
                radio.type = 'radio';
                radio.name = attribute.name;
                radio.value = value.value;
                radio.addEventListener('change', updateSelectedVariant);
                const label = document.createElement('label');
                label.innerText = value.value;

                attributeDiv.appendChild(radio);
                attributeDiv.appendChild(label);
            });

            attributesContainer.appendChild(attributeDiv);
        });
    }

    function updateSelectedVariant() {
        const selectedValues = Object.values(selectedAttributes);
        const variant = product.variants.find(v => {
            return selectedValues.every(value =>
                v.variantAttributes.some(attr => attr.value === value)
            );
        });
        selectedVariant = variant || {};
        document.getElementById('main-image').src = selectedVariant.mainImage || '';
        document.getElementById('product-price').innerText = selectedVariant.price || 'N/A';
        document.getElementById('product-stock').innerText = selectedVariant.stock || 'N/A';
    }

    document.getElementById('purchase-button').addEventListener('click', () => {
        alert(`您已购买 ${product.name}，配置: ${JSON.stringify(selectedAttributes)}`);
    });

    fetchProduct();
</script>
</body>
</html>